<template>
  <div class="learn-more-container">
    <div class="learn-more-content">
      <div class="image-container">
        <img
          src="@/assets/learn.gif"
          alt="Learning Animation"
          class="learn-animation"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
// Component logic here
</script>

<style lang="scss" scoped>
.learn-more-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background-color: #f9fafb;

  .learn-more-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    .image-container {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
      }

      .learn-animation {
        width: 100%;
        height: auto;
        border-radius: 8px;
        opacity: 0;
        animation: fadeIn 0.8s ease-out forwards;
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@media (max-width: 768px) {
  .learn-more-container {
    padding: 1rem;

    .learn-more-content .image-container {
      padding: 1rem;
    }
  }
}
</style>